<!--
 * @Description: 食谱信息页面
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-02 22:52:56
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-07 19:28:35
 -->
<template>
  <div>
    <div>
      <div v-if="!isHaveRecipe">
        <div v-if="errMsg">
          {{ errMsg }}
        </div>
        <div v-else>
          <loading />
        </div>
      </div>
      <div v-else>
        <div style="overflow:hidden;">
          <vueSeamless :data="serviceDays" :class-option="optionCustomer" class="seamless-warp3 fl">
            <span slot="left-switch" class="left-arrow" />
            <span slot="right-switch" class="right-arrow" />
            <ul id="seamless-ul" :style="'width:' + ulWidth + 'px'" class="item">
              <li v-for="(item, key) in serviceDayObj" :key="key" :class="key == curDay ? 'check-color' : ''" @click="selectRecipe(key)">{{ item }}</li>
            </ul>
          </vueSeamless>
          <copyRecipe v-if="isCustom" :service-id="+serviceId" class="fr" style="margin-top:15px;" />
        </div>
        <el-divider />
        <div class="recipe-body">
          <div><span class="recipe-type">早餐</span></div>
          <recipe 
            v-if="recipeCase.breakfast" 
            :diets="recipeCase.breakfast" 
            :is-custom="isCustom" 
            @popDiyRecipe="popDiyRecipe('breakfast', $event)" 
            @popAddRecipe="popAddRecipe('breakfast', $event)" 
            @delRecipe="delRecipe('breakfast', $event)"
          />
          <div><span class="recipe-type">早加餐</span></div>
          <recipe 
            v-if="recipeCase.breakfast_extra" 
            :diets="recipeCase.breakfast_extra" 
            :is-custom="isCustom" 
            @popDiyRecipe="popDiyRecipe('breakfast_extra', $event)" 
            @popAddRecipe="popAddRecipe('breakfast_extra', $event)" 
            @delRecipe="delRecipe('breakfast_extra', $event)"
          />
          <div><span class="recipe-type">午餐</span></div>
          <recipe 
            v-if="recipeCase.lunch" 
            :diets="recipeCase.lunch" 
            :is-custom="isCustom" 
            @popDiyRecipe="popDiyRecipe('lunch',$event)" 
            @popAddRecipe="popAddRecipe('lunch',$event)" 
            @delRecipe="delRecipe('lunch',$event)"
          />
          <div><span class="recipe-type">午加餐</span></div>
          <recipe 
            v-if="recipeCase.lunch_extra" 
            :diets="recipeCase.lunch_extra" 
            :is-custom="isCustom" 
            @popDiyRecipe="popDiyRecipe('lunch_extra',$event)" 
            @popAddRecipe="popAddRecipe('lunch_extra',$event)" 
            @delRecipe="delRecipe('lunch_extra',$event)"
          />
          <div><span class="recipe-type">晚餐</span></div>
          <recipe 
            v-if="recipeCase.supper" 
            :diets="recipeCase.supper" 
            :is-custom="isCustom" 
            @popDiyRecipe="popDiyRecipe('supper',$event)" 
            @popAddRecipe="popAddRecipe('supper',$event)" 
            @delRecipe="delRecipe('supper',$event)"
          />
        </div>
      </div>
    </div>
    <el-dialog
      :title="popTitle"
      :visible.sync="diyRecipeShow"
      width="500px"
      size="mini"
      @close="closePop">
      <div class="diy-axis">
        <div class="library-btn">
          <recipe-lib @selectionRecipeLib="selectionRecipeLib" />
        </div>
        <div class="foot-material">
          <div class="foot-info">
            <div class="foot-img">
              <img :src="recipeInfo.img" alt="">
            </div>
            <div class="foot-name">
              {{ recipeInfo.name }}
            </div>
          </div>
          <div class="diy-kcal">
            食材热量：<input v-model.trim="recipeInfo.energy" type="text" placeholder="请输入热量">
            <span>KCAL</span>
          </div>
          <div class="diy-weight">
            食材用量：<input v-model.trim="recipeInfo.dosage" type="text" placeholder="请输入用量">
            <span>
              <el-select v-model.trim="recipeInfo.unit" size="medium" placeholder="食材单位">
                <el-option v-for="item in unit" :key="item" :label="item" :value="item" />
              </el-select>
            </span>
          </div>
          <div class="md-meal-time">
            用餐时间：<input v-model="recipeInfo.meal_time" type="text" placeholder="修改用餐时间">
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="warning" @click="cancelDiy">取消</el-button>
        <el-button v-if="addType !== 1" type="primary" @click="batchModifyRecipe">批量修改</el-button>
        <el-button v-if="addType === 1" type="primary" @click="submitAddDiy">确 定</el-button>
        <el-button v-else type="primary" @click="submitDiy">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import vueSeamless from 'vue-seamless-scroll'
import recipe from './recipeModule/recommend'
import recipeLib from './recipeModule/recipeLib'
import copyRecipe from './recipeModule/copyRecipe'
import loading from '@/views/components/loading'
import config from '@/utils/config'

export default {
  components: {
    vueSeamless, recipe, recipeLib, loading, copyRecipe
  },
  data() {
    return {
      serviceId: 0,
      isCustom: true, // 是否自定义食谱
      isHaveRecipe: true, // 是否存在食谱信息
      recipeCaseList: [],
      recipeCase: {},
      serviceDays: [],
      serviceDayObj: {},
      errMsg: '', // 报错信息
      ulWidth: 700, // ul的宽度
      popTitle: '',
      diyRecipeShow: false,
      addType: 0,
      recipeInfo: {
        meal_time: '',
        mid: '',
        img: '',
        name: '',
        energy: '',
        dosage: '',
        unit: ''
      },
      unit: ['ml', 'g'],
      mealType: '',
      curDay: '', // 当前天
      fixedfood: [],
      modifyRecipeForm: { // 修改单个食材的信息
        service_id: 0,
        day_index: 0,
        meal_type: '',
        action: '',
        recipe_info: {},
      },
      batchModifyRecipeForm: { // 批量修改食材信息
        origin_name: '',
        service_id: 0,
        recipe_info: {}
      }
    }
  },
  computed: {
    optionCustomer() {
      return {
        step: 100,
        autoPlay: false,
        navigation: true,
        direction: 2,
        switchSingleStep: 700,
        limitMoveNum: 2,
        switchOffset: 20,
        switchDisabledClass: 'disabled',
        switchDelay: 10
      }
    }
  },
  created() {
    this.fixedfood = config.fixedfood
  },
  mounted() {
    
  },
  methods: {
    initData(serviceId, isCustom, dayIndex) {
      this.serviceId = serviceId
      this.isCustom = isCustom
      this.curDay = 'day' + (dayIndex ? dayIndex : 1)
      this.isHaveRecipe = false
      this.getRecipe(true)
    },
    getRecipe(handle = false) {
      this.$api.order.service
        .recipe(this.serviceId)
        .then(res => {
          this.recipeCaseList = res.data.recipe_case
          console.log(this.curDay)
          this.recipeCase = this.recipeCaseList[this.curDay]
          if (handle) {
            //处理滚动的值
            this.serviceDays = Object.keys(this.recipeCaseList)
            for (const i in this.serviceDays) {
              this.serviceDayObj[this.serviceDays[i]] = '第 ' + (+i + 1) + ' 天'
            }
            this.ulWidth = 100 * this.serviceDays.length
          }
          this.isHaveRecipe = true
          this.diyRecipeShow = false
        }).catch(err => {
          this.isHaveRecipe = false
          console.log(err)
          this.errMsg = err.data.message
        })
    },
    selectRecipe(key) {
      this.curDay = key
      this.recipeCase = this.recipeCaseList[key]
    },
    getParam(val, recipeval) {
      this.mealType = val
      this.recipeInfo.meal_time = recipeval.meal_time
      this.recipeInfo.mid = recipeval.id
      this.recipeInfo.img = recipeval.thumbnail
      this.recipeInfo.name = recipeval.material_name
      this.recipeInfo.energy = parseInt(recipeval.material_energy)
      this.recipeInfo.dosage = recipeval.dosage
      this.recipeInfo.unit = recipeval.unit
      this.popTitle = '修改食材'
    },
    delRecipe(val, recipeval) {
      this.getParam(val, recipeval)
      this.$confirm('确定要删除此食材吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.modifyRecipeForm.action = 'delete'
        //删除食材接口
        this.modifyRecipe()
      }).catch(err => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消设置'
        })
      })
    },
    popDiyRecipe(val, event) {
      this.getParam(val, event)
      this.addType = 0
      this.diyRecipeShow = true
    },
    popAddRecipe(val, time) {
      this.recipeInfo = {
        meal_time: '',
        mid: '',
        img: '',
        name: '',
        energy: '',
        dosage: '',
        unit: ''
      }
      this.diyRecipeShow = true
      this.mealType = val
      this.recipeInfo.meal_time = time
      this.mid = 0
      this.addType = 1
      this.popTitle = '添加食材'
    },
    selectionRecipeLib(recipeLib) {
      // 保存原名称，批量修改时需要
      this.batchModifyRecipeForm.origin_name = this.recipeInfo.name
      // 不能加，不然修改食谱有问题
      // this.recipeInfo.mid = recipeLib.id
      this.recipeInfo.img = recipeLib.thumbnail
      this.recipeInfo.name = recipeLib.name
      this.recipeInfo.energy = parseInt(recipeLib.energy)
      this.fixedfood.forEach(item => {
        if (+item.id === +recipeLib.id) {
          this.recipeInfo.energy = item.energy_group
          this.recipeInfo.dosage = item.dosage
          this.recipeInfo.unit = item.unit
          this.recipeInfo.meal_time = item.meal_time
        }
      })
    },
    closePop() {
      this.diyRecipeShow = false
    },
    modifyRecipe() {
      if (this.serviceId <= 0) {
        this.$notify({ title: '服务订单不存在', type: 'error', duration: 2500 })
        return
      }
      this.modifyRecipeForm.service_id = this.serviceId
      this.modifyRecipeForm.day_index = parseInt(this.curDay.replace(/day/, ''))
      this.modifyRecipeForm.meal_type = this.mealType
      this.modifyRecipeForm.recipe_info = this.recipeInfo
      this.$api.order.service
        .modifyRecipe({
          data: this.modifyRecipeForm
        })
        .then(res => {
          this.getRecipe()
          this.$notify({ title: '食材修改成功', type: 'success', duration: 2500 })
        }).catch(err => {
          this.$notify({ title: err.data.message, type: 'error', duration: 2500 })
        })
    },
    batchModifyRecipe() {
      this.batchModifyRecipeForm.service_id = this.serviceId
      this.batchModifyRecipeForm.recipe_info = this.recipeInfo
      this.$api.order.service
        .batchModifyRecipe({
          data: this.batchModifyRecipeForm
        })
        .then(res => {
          this.getRecipe()
          this.$notify({ title: '食材修改成功', type: 'success', duration: 2500 })
        }).catch(err => {
          this.$notify({ title: err.data.message, type: 'error', duration: 2500 })
        })
    },
    submitAddDiy() {
      this.modifyRecipeForm.action = 'add'
      this.modifyRecipe()
    },
    cancelDiy() {
      this.diyRecipeShow = false
    },
    submitDiy() {
      this.modifyRecipeForm.action = 'update'
      this.modifyRecipe()
    }
  }
}
</script>

<style lang="scss" scoped>
.seamless-warp3 {
  overflow: hidden;
  height: 55px;
  width: 700px;
  margin-left: 70px;
  .left-arrow, .right-arrow {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #00a0e9;
    cursor: pointer;
    &:hover {
      background-color: #0f39fa;
    }
    &::before {
      position: absolute;
      content: '';
      width: 12px;
      height: 12px;
      top: 9px;
      left: 12px;
      border: 2px solid #fff;
    }
  }
  .left-arrow::before {
    border-right: 0;
    border-bottom: 0;
    transform: rotate(-45deg);
  }
  .right-arrow::before {
    border-left: 0;
    border-top: 0;
    left: 9px;
    transform: rotate(-45deg);
  }
  ul.item {
    list-style: none!important;
    margin: 0;
    padding: 0;
    li {
      float: left;
      width: 90px;
      height: 30px;
      margin: 10px 5px 5px;
      line-height: 30px;
      // background-color: #999;
      background-color: #999;
      color: #fff;
      text-align: center;
      font-size: 18px;
      cursor: pointer;
    }
    li.check-color {
      background-color: #00a0e9;
    }
  }
}
</style>

<style scoped>
.diy-kcal{
  margin-bottom: 10px;
}
.diy-kcal input,.diy-weight input,.md-meal-time input{
  height: 36px;
  line-height: 36px;
  border: 1px solid #bfcbd9;
  border-radius: 5px;
  padding: 0 10px;
  box-sizing: border-box;
}
.md-meal-time{
  margin-top: 10px;
}
.diy-weight .el-select{
  width: 66px;
}
.diy-kcal span{
  margin-left: 10px;
}
.foot-img {
  width:100px;
  border: 1px solid #fce1e1;
  border-radius: 10%;
  margin-top: 10px;
}
.foot-name {
  min-height: 10px;
  line-height: 30px;
}
</style>
